<template>
    <a-row class="globalHeader" align="center" :wrap="false">
        <a-col flex="auto" class="aa">
            <a-menu
                    class="box"
                    mode="horizontal"
                    :selected-keys="selectedKeys"
                    @menu-item-click="doMenuClick"

            >
                <a-menu-item
                        key="0"
                        :style="{ padding: 0, marginRight: '38px' }"
                        disabled
                >
                    <div class="title-bar">
                        <img class="logo" src="../assets/mutifun6.png"/>

                    </div>
                </a-menu-item>
                <a-menu-item v-for="i in visibleRoutes"
                             :key="i.path" class="menu"

                >
                   <div v-if="userRole === i?.meta?.role || i?.meta?.role===undefined" >
                       {{ i.name }}
                   </div>

                </a-menu-item>
            </a-menu>

        </a-col>

        <a-col flex="100px">
                <a-popconfirm content=" 退出登录?" trigger="hover" position="bottom" @ok="logout" >
                <span>
                     <router-link style=" text-decoration: none;color: #1e20ff;"
                                  v-if="showUser !== '登录/注册'" to="/base">{{ showUser }}</router-link>
                </span>

                </a-popconfirm>

            <span>
                    <router-link style=" text-decoration: none;color: #1e20ff;"
                                 v-if="showUser === '登录/注册'"  to="/login">登录/注册</router-link>
            </span>

        </a-col>
    </a-row>
</template>

<script setup>
    import {onBeforeMount, ref, watch} from "vue";
    import {useStore} from "vuex";
    import {routes} from "../router/routes";
    import {createRouter, useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";
    import message from "@arco-design/web-vue/es/message";
    import myAxios from "../plugins/myAxios";
    import {computed} from "@vue/reactivity";
    import axios from "axios";

    const currentUser = ref({})
    const showUser = ref('')
    const userRole=ref('未登录');

    onMounted(async () => {
        //从远程处获取用户信息
        const res = await myAxios.get('/user/current',{ skipInterceptor: true });
        //后端返回的code是0,则获取到了用户的信息，然后返回
        if (res.code == 0) {
            showUser.value= res.data.username
            userRole.value=res.data.userRole
        } else {
            showUser.value = '登录/注册'
        }

    })

    watch(()=>showUser, (newValue, oldValue) => {

        if(newValue?.userRole){
            userRole.value=newValue?.value?.userRole

        }
    }, {immediate:true,deep: true})


     const router = useRouter();
    /*const router = createRouter({
        // ...options
        getUserInfo,
    })*/

    const selectedKeys = ref(["/"]);



    const visibleRoutes  = routes.filter((i, index) => {


            if (i.meta?.hideInMenu) {
                return false;
            }

            return true;
        });



    router.afterEach((to, from, failure) => {
        selectedKeys.value = [to.path];
    });
    // const store = useStore();
    /*setTimeout(() => {
      store.dispatch("user/getLoginUser", {
        userName: "路明非,你回来了！",
        role: "admin",
      });
    }, 2000);*/
    const doMenuClick = (key) => {
        router.push({
            path: key,
        });
    };

    //退出登录
    const logout=async ()=>{
        const res = await myAxios.post('/user/logout');
        //后端返回的code是0,则退出成功
        if (res.code == 0) {
            setTimeout(()=>{
                message.success('退出成功！')
            },500)
            location. reload()
        } else {
            message.error('退出失败！')
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>



    .title-bar {
        align-items: center;

    }

    .logo {
        height: 48px;
        weight: 104px;
        margin-left: 24px;
    }

    .title {
        text-align: center;
    }
</style>
